<template>
  <div class="box">
    <div class="money-pay">
      <el-card class="container" shadow="always" v-loading="loading">
        <div class="pay-order">
          <div class="el-icon-circle-check"></div>
          <div class="order-info">
            <div class="title">{{ $t('money.pay.success') }}</div>
            <div class="warn">
              {{ $t('money.please')
              }}<span>
                <no-ssr>
                  <vue-countdown @end="getList" v-if="list.overtime_time > 0" :time="list.overtime_time * 1000" v-slot="{ days, hours, minutes, seconds }">
                    {{ days }} {{ $t('money.day') }} {{ hours }} {{ $t('money.hour') }} {{ minutes }} {{ $t('money.minute') }} {{ seconds }} {{ $t('money.second') }}
                  </vue-countdown>
                  <no-ssr v-if="list.overtime_time <= 0"> 0 {{ $t('money.day') }} 0 {{ $t('money.hour') }} 0 {{ $t('money.minute') }} 0 {{ $t('money.second') }} </no-ssr>
                </no-ssr> </span
              >{{ $t('money.pay.complete_payment') }}
            </div>
            <div class="address" v-show="!detail" v-if="list && list.good_location">
              {{ $t('money.pay.receiving') }}：{{ list.good_location.name }} {{ list.good_location.cellphone }} {{ list.good_location.location }}/{{ list.good_location.house }}<template v-if="list.good_location.address">({{ list.good_location.address }})</template>
            </div>
            <div class="order-details" v-show="detail" v-if="list.good_location">
              <el-divider></el-divider>
              <ul>
                <li>
                  <div class="label">{{ $t('money.pay.order_number') }}：</div>
                  <div class="content">
                    <span class="on">{{ list.identification }}</span>
                  </div>
                </li>
                <li>
                  <div class="label">{{ $t('money.pay.receiving') }}：</div>
                  <div class="content">
                    {{ list.good_location.name }} {{ list.good_location.cellphone }} {{ list.good_location.location }}<template v-if="list.good_location.address">({{ list.good_location.address }})</template>
                  </div>
                </li>
                <li>
                  <div class="label">{{ $t('indent.name') }}：</div>
                  <div class="content">
                    <span v-for="(item, index) in list.goods_list" :key="index">{{ item.good ? item.good.name : '-' }} </span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="fright">
              <div class="total">
                {{ $t('indent.payroll') }}：
                <div class="price">
                  <span>{{ (list.total ? list.total : 0) | thousands }}</span
                  >{{ $t('common.monetary_unit') }}
                </div>
              </div>
              <div v-if="list.good_location" class="show-detail" @click="showDetail">{{ $t('money.pay.order_details') }}<i class="iconfont dsshop-xia"></i></div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="container mode-payment-box" shadow="always" v-loading="loading">
        <div class="title"><img :src="require('assets/img/pay.png')" alt="" />{{ $t('money.pay.mode_payment') }}</div>
        <el-divider></el-divider>
        <!-- <div class="min-title">{{ $t('money.pay.payment') }}</div> -->
        <div class="pay-flow" style="display: flex;" v-if="clicked == 1 || clicked == 2">
          <div class="flow-step">
            <p class="flow">1</p>
            <p class="line">약관동의</p>
          </div>
          <div class="flow-step step2">
            <p class="flow">2</p>
            <p class="line">카드 및 본인 인정</p>
          </div>
          <div class="flow-step">
            <p class="flow">3</p>
            <p class="line">정보입력</p>
          </div>
          <div class="flow-step">
            <p class="flow">4</p>
            <p class="line">가입완료</p>
          </div>
        </div>

        <!-- <div class="list"> -->
          <!-- <div :class="[clicked == 1 ? 'li on' : 'li']" v-loading="buttonLoading" @click="handleClick(1, 'nvarpay')">
            <img class="image" :src="require('assets/img/npay.png')" />
          </div> -->
          <!-- <div class="li" v-loading="buttonLoading" v-if="list.user" @click="payment(1)">
            {{$t('money.pay.prepaid_deposit')}}（{{list.user.money| thousands}}）
          </div> -->
          <!-- <div :class="[clicked == 2 ? 'li on' : 'li']" v-loading="buttonLoading" @click="handleClick(2, 'kakaopay')">
            <img class="image" :src="require('assets/img/kpay.png')" style="height:60px" />
          </div> -->
          <!-- <div :class="[clicked==5? 'li on' : 'li']" v-loading="buttonLoading" @click="handleClick(5,'wechat')">
            <img class="image" :src="require('assets/img/kpay.png')" />
          </div>
          <div :class="[clicked==6? 'li on' : 'li']" v-loading="buttonLoading" @click="handleClick(6,'payco')">
            <img class="image" :src="require('assets/img/kpay.png')" />
          </div> -->
        <!-- </div> -->
        <!-- <div class="min-title">신용카드</div>
        <div class="list">
          <div :class="[clicked==3? 'li on' : 'li']" v-loading="buttonLoading" @click="handleClick(3,'card')">
            <img class="image" :src="require('assets/img/xpay.png')" />
          </div>
        </div> -->
        <!-- <div class="ypay">
          <el-radio v-model="checked" label="3" @change="handleCheck">신용카드</el-radio>
          <img class="image" :src="require('assets/img/xpay.png')" />
        </div> -->
        <div class="ypay">
          <!-- <el-checkbox v-model="checked" @change="handleCheck">카드결제</el-checkbox> -->
          <el-radio v-model="checked" label="3" @change="handleCheck">신용카드 </el-radio>
          <div>
            <img class="image" :src="require('assets/img/xpay.png')" style="width: 200px;" />
            <img class="image" :src="require('assets/img/ypay.jpg')" />
          </div>
        </div>
        <div class="ypay">
          <!-- <el-checkbox v-model="checked" @change="handleCheck">카드결제</el-checkbox> -->
          <el-radio v-model="checked" label="6" @change="handleCheck">현금결제 </el-radio>
          <!-- <div>
            <img class="image" :src="require('assets/img/xpay.png')" style="width: 200px;" />
            <img class="image" :src="require('assets/img/ypay.jpg')" />
          </div> -->
        </div>
        <!-- <div class="pay-form" v-if="checked==4">
          <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-form-item label="卡号" prop="cardNo">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-col :span="12">
              <el-form-item label="유효 기간" prop="date1">
                <el-date-picker type="month" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
           <el-col class="line" :span="2">-</el-col> 
            <el-col :span="12">
              <el-form-item label="Cvc" prop="Cvc">
                <el-input v-model="form.Cvc"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div> -->
        <div class="pay-bottom-serive">
          <svg t="1690975634237" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18199" width="200" height="200">
            <path
              d="M771.2 375l-275 266.3c-1.9 2.9-3.8 5.8-6.7 7.7-7.7 7.7-18.2 11.5-28.7 11.5-10.6 0-21.1-3.8-29.7-11.5-1.9-1.9-4.8-4.8-5.8-7.7L277.7 498.6c-15.3-15.3-15.3-39.3 0-54.6 15.3-15.4 41.2-15.4 56.5 0l126.5 121.7 253.9-245.3c16.3-15.3 41.2-15.3 56.5 0 16.4 14.4 16.4 39.3 0.1 54.6z m147.6-227.1c-12.5-11.5-28.8-17.3-45-17.3H869c-1 0-11.5 1-27.8 1-27.8 0-80.5-1.9-131.3-14.4-65.2-15.3-140.9-87.1-163-101.5-10.5-6.7-24-10.5-36.4-10.5S485.6 9 474.1 15.7C471.3 17.6 392.7 99 316 117.2c-50.8 12.4-105.4 14.4-132.2 14.4-17.3 0-27.8-1-28.7-1h-3.8c-17.3 0-32.6 5.8-45 17.3-13.4 11.5-21.1 28.7-21.1 46v159c0 586.4 397.6 662.1 413.9 665 3.8 1 7.7 1 11.5 1s7.7 0 11.5-1c17.2-2.9 416.8-78.6 416.8-665v-159c0-17.3-7.7-34.5-20.1-46z"
              p-id="18200"
              fill="#26B514"
            ></path>
          </svg>
          <div class="pay-securit">
            <p class="pay-title">결제 보안</p>
            <p class="hint">귀하의 결제 정보는 안전하게 보관됩니다. 우리는 귀하의 정보를 어떤 형태로든 저장하지 않습니다</p>
            <p class="safety">안전 인증서</p>
            <div class="flex">
              <img class="pay-service-img" :src="require('assets/img/pay-img1.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img2.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img3.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img4.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img5.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img6.webp')" alt="" />
              <img class="pay-service-img" :src="require('assets/img/pay-img7.webp')" alt="" />
            </div>
          </div>
        </div>
        <div class="pay-bottom-serive">
          <svg t="1690975912988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22415" width="200" height="200">
            <path
              d="M912.9 130.6c-26.1 4.5-52.8 6.9-80.2 6.9-115.4 0-221.1-41.9-302.6-111.2-10.6-9-26.2-9-36.8 0-81.5 69.4-187.2 111.2-302.6 111.2-27 0-53.5-2.3-79.2-6.7-17.2-2.9-32.9 10.4-33 27.9-0.2 109.1-0.4 238.1-0.4 242.5 0 471 394.5 592.7 431 603 1.8 0.5 3.6 0.5 5.4 0C550.9 994 943 873 945.5 405.7l0.4-247c0-17.6-15.8-31.1-33-28.1zM546 568.9v154.5c0 18.8-15.2 34-34 34s-34-15.2-34-34V568.9c-68.2-15.5-119.1-76.4-119.1-149.3 0-84.5 68.5-153.1 153.1-153.1S665.1 335 665.1 419.6c0 72.9-50.9 133.9-119.1 149.3z"
              fill="#26B514"
              p-id="22416"
            ></path>
          </svg>
          <div class="pay-privacy">
            <p class="pay-title">개인 정보 보호</p>
            <p class="hint">
              귀하의 개인 정보를 보호하는 것은 우리에게 중요합니다! 귀하의 정보가 보호되고 공개되지 않으니 안심하십시오. 우리는 돈을 위해 귀하의 개인 정보를 판매하지 않을 것이며 개인 정보 및 쿠키 정책에 따라 귀하에게 서비스를 제공하고 개선하기 위해서만 귀하의 정보를 사용할 것입니다.
            </p>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="pay-btn">
          <el-button @click="payment" type="primary" v-loading="buttonLoading">결제하기</el-button>
        </div>
      </el-card>
    </div>
    <el-dialog title="" :visible.sync="centerDialogVisible" top="8vh" :show-close="false" :close-on-click-modal="false" width="1000px" height="500px" center>
      <!-- <div class="vue-qrcode">
        결제가 완료되면 페이지를 새로고침해주세요.
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="close">닫기</el-button>
        <el-button type="primary" @click="refresh">새로고침</el-button>
      </div>
      <iframe :src="`/static-content.html?`" frameborder="0" width="100%" height="600px" id="phpIframe"></iframe>
    </el-dialog>
    <!--  -->
    <!-- <div v-html="form"></div> -->
  </div>
</template>

<style lang="scss" scoped>
@import './scss/pay';
</style>

<script>
import js from './js/pay'
export default js
</script>
